<template>
  <div class="variety-corresponding">
    <BasicCard class="art-table-card">
      <div class="table-item">
        <BasicVxeTable v-bind="gridOptions">
          <template #color="{ row }">
            <div class="colorBar" :style="{ background: row.thirdMaterialColor }"> </div>
          </template>
          <template #operate="{ row }">
            <el-button type="danger" :icon="Delete">删除</el-button>
          </template>
        </BasicVxeTable>
      </div>
      <div class="table-item">
        <BasicVxeTable v-bind="gridOptionsHistory">
          <template #color="{ row }">
            <div class="colorBar" :style="{ background: row.thirdMaterialColor }"> </div>
          </template>
        </BasicVxeTable>
      </div>
    </BasicCard>
  </div>
</template>
<script setup lang="ts">
  import dayjs from 'dayjs'
  import { Delete } from '@element-plus/icons-vue'
  import { handleColumnsCorresponding } from '../data'
  import {
    getDuiYingGuanXi,
    getWuLiaoList,
    postDiSanFangPingZhongDuiYingGuanXi,
    postZongZhiDangQianDuiYingGuanXi,
    postGengXingCuXiLianPingZhong,
    getChaXunCuXiLianPingZhong,
    deleteCuXiLianPingZhong,
    deleteDaBaoJiPingZhong,
    postDaBaoJiPingZhongDuiYingGuanXi,
    getChaXunDaBaoJiPingZhong,
    postGengXingDaBaoJiPingZhong,
    postDaBaoJiZongZhiDangQianDuiYingGuanXi
  } from '@/api/shengChanSheZhi'

  const props = defineProps<{
    type: string
    title: string
  }>()

  const gridOptions = reactive<BasicGridProps>({
    extraConfig: {
      title: props.title,
      isCustom: false,
      isExport: false,
      isFilterAndSort: false
    }, // 拓展的配置
    id: `variety-corresponding-${props.type}`, // id用于缓存,务必配置
    loading: true,
    columns: handleColumnsCorresponding('main'),
    toolbarConfig: {} // 工具栏
  })

  const gridOptionsHistory = reactive<BasicGridProps>({
    extraConfig: {
      title: '历史信息',
      isCustom: false,
      isExport: false,
      isFilterAndSort: false
    }, // 拓展的配置
    id: `variety-corresponding-history-info`, // id用于缓存,务必配置
    loading: true,
    columns: handleColumnsCorresponding('info'),
    toolbarConfig: {} // 工具栏
  })

  const time1 = ref(25063001)
  const time2 = ref(25073001)
  const getList = () => {
    getDuiYingGuanXi(
      {
        isCurrent: false,
        tsidStart: time1.value,
        tsidEnd: time2.value
      },
      props.type
    )
      .then((res: any) => {
        gridOptions.loading = false
        gridOptionsHistory.loading = false
        gridOptionsHistory.data = res.map((value) => {
          return {
            ...value,
            end: value.end === '至今' ? value.end : dayjs(value.end).format('YYYY-MM-DD HH:mm')
          }
        })
        gridOptions.data = res.filter((value) => {
          return value.end === '至今'
        })
      })
      .catch(() => {
        gridOptions.loading = false
        gridOptionsHistory.loading = false
      })
  }

  onMounted(() => {
    getList()
  })
</script>

<style scoped lang="scss">
  :deep(.el-card__body) {
    display: flex;
  }
  .table-item {
    width: 50%;

    &:first-child {
      margin-right: 20px;
    }
  }

  .colorBar {
    width: 60%;
    height: 30px;
    margin: 0 20%;
  }
</style>
